<template>
  <a-row>
    <a-modal
      title="设置本地端口"
      :visible="localPortDlgShow"
      @ok="beginTunnel"
      @cancel="localPortDlgShow = false"
      width=700
    >
      <a-input-number v-model="dlglocalPort"></a-input-number>
    </a-modal>
    <a-modal
      title="设置远端地址"
      :visible="remotePortDlgShow"
      @ok="beginTargetAddr"
      @cancel="remotePortDlgShow = false"
      width="700px"
    >
      <a-space>
        IP:<a-input v-model="targetAddr.targetIP"></a-input>
        端口:<a-input-number v-model="targetAddr.targetPort"></a-input-number>

        类型:<a-select
          default-value="tcp"
          style="width: 120px"
          @change="handleChange"
          :value="targetAddr.netType"
        >
          <a-select-option value="tcp"> tcp </a-select-option>
          <a-select-option value="udp"> udp </a-select-option>
        </a-select>
        本地端口:<a-input-number v-model="targetAddr.localPort"></a-input-number>
      </a-space>
    </a-modal>
    <a-space style="margin-top: 10px">
      服务器地址<a-input
        style="width: 300px"
        placeholder="格式ip:port，如192.168.1.10:3999"
        v-model="searchAddr"
      ></a-input>
      <a-input-search
        placeholder="不填搜索全部"
        enter-button
        v-model="filter"
        @search="onSearch"
      />
    </a-space>

    <a-table
      :columns="columns"
      style="margin-top: 15px"
      :data-source="edges"
      :rowKey="(record) => record.ID"
    >
      <a-space slot="action" slot-scope="record" v-if="record.type === 'edge'">
        <a href="javascript:;" @click="openTargetAddrForEdge(record)"
          >Edge一键穿越</a
        >
        <a href="javascript:;" @click="openTargetAddr(record)">自定义穿越</a>
        <a href="javascript:;" @click="mapTargetAddr(record)">地址映射</a>
  
        <!--<a href="javascript:;" @click="close(record)">关闭</a>-->
      </a-space>
      <a-space slot="action" slot-scope="record" v-else>
        <a href="javascript:;" @click="web(record)">浏览器</a>
        <a href="javascript:;" @click="cmd(record)">cmd</a>
      </a-space>
    </a-table>
  </a-row>
</template>
<script>
const columns = [
  { title: "id", dataIndex: "ID", key: "id" },
  { title: "目标地址", dataIndex: "targetAddr", key: "targetAddr" },
  { title: "本地端口", dataIndex: "localAddr", key: "localPort" },
  { title: "状态", dataIndex: "state", key: "state" },
  {
    title: "操作",
    dataIndex: "",
    key: "x",
    scopedSlots: { customRender: "action" },
  },
];
import {
  getList,
  wakeupEdgeEx,
  beginTunnelEx,
  getEdgeTunnel,
} from "@/service/tunnel";
function parseAddr(result) {
  if (result && Array.isArray(result)) {
    let children = result.map((x) => {
      let parts = x.split("@");
      let res = { ID: x, type: "addr" };
      if (parts && parts.length > 1) {
        res.localAddr = parts[1];
        let xparts = parts[0].split("-");
        if (xparts && xparts.length > 1) {
          res.targetAddr = xparts[1];
          res.state = xparts[0];
        }
      }
      return res;
    });
    return children;
  }
  return [];
}
export default {
  data() {
    return {
      columns,
      searchAddr: "42.192.199.243:39999",
      edges: [],
      filter: "",
      dlglocalPort: 6666,
      localPort: 0,
      localPortDlgShow: false,
      record: null,
      remotePortDlgShow: false,
      targetAddr: {
        targetIP: "127.0.0.1",
        netType: "tcp",
        targetPort: 18866,
        localPort:0,
      },
    };
  },
  methods: {
    onSearch() {
      let self = this;
      getList(this.searchAddr).then((res) => {
        console.log("-----------", res);
        if (res && res.data && res.data.result) {
          let result = res.data.result;
          if (result && Array.isArray(result)) {
            result.forEach((r) => {
              r.type = "edge";
              if (r.Addrs) {
                self.$set(r, "children", parseAddr(r.Addrs));
              }
            });
          }
          let edges = res.data.result;
          if (self.filter !== "") {
            edges = edges.filter((e) => {
              return e.ID.includes(self.filter);
            });
          }
          self.edges = edges;
          console.log("-----------", self.edges);
        }
      });
    },
    openTargetAddr(record) {
      console.log("----------", record);
      this.dlglocalPort = 0;
      this.localPort = 0;
      this.record = record;
      this.localPortDlgShow = true;
    },
    openTargetAddrForEdge(record) {
      console.log("----------", record);
      this.dlglocalPort = 0;
      this.localPort = 0;
      this.record = record;
      this.beginTunnel();
      //let self = this;
      this.beginTargetByParam(this.record.ID, "127.0.0.1", 16666, "tcp").then(addrInfo=>{
        console.log("web---------",addrInfo)
        if(addrInfo){
          addrInfo.forEach(addr=>{
            if(addr.targetAddr.indexOf(":16666") >= 0){
              window.open(addr.localAddr.replace("[::]","http://127.0.0.1"));
            }
          })
        }
      });
      this.beginTargetByParam(this.record.ID, "127.0.0.1", 22, "tcp");
    },
    beginTunnel() {
      this.localPortDlgShow = false;
      this.localPort = this.dlglocalPort;
      wakeupEdgeEx(
        this.searchAddr,
        this.record.ID,
        this.localPort,
        (precent, text, isOK, addr) => {
          this.$set(this.record, "state", text);
          this.$set(this.record, "localAddr", addr);
          //this.record.state = text;
          //this.record.localAddr = addr;
        }
      );
    },
    handleChange(val) {
      this.targetAddr.netType = val;
    },
    mapTargetAddr(record) {
      this.record = record;
      this.remotePortDlgShow = true;
    },
    beginTargetByParam(id, targetIP, targetPort, netType) {
      let self = this;
      return new Promise((re, rej) => {
        beginTunnelEx(id, targetIP, targetPort, netType, (addr) => {
          console.log("***********", addr);
          self.remotePortDlgShow = false;
          getEdgeTunnel(self.record.ID).then((res) => {
            if (res && res.data && res.data.result) {
              let result = res.data.result;
              console.log("***************", result);
              //let children = []
              if (result && Array.isArray(result)) {
                let children = parseAddr(result);
                //self.record.children = children;
                self.$set(self.record, "children", children);
                re(children)
                console.log("00000",children)
              }else{
                rej()
              }
            }
          })
        });
      });
    },
    beginTargetAddr() {
      let self = this;
      beginTunnelEx(
        this.record.ID,
        this.targetAddr.targetIP,
        this.targetAddr.targetPort,
        this.targetAddr.netType,
        (addr) => {
          console.log("***********", addr);
          self.remotePortDlgShow = false;
          getEdgeTunnel(self.record.ID).then((res) => {
            if (res && res.data && res.data.result) {
              let result = res.data.result;
              console.log("***************", result);
              //let children = []
              if (result && Array.isArray(result)) {
                let children = parseAddr(result);
                //self.record.children = children;
                self.$set(self.record, "children", children);
              }
            }
          });
        },this.targetAddr.localPort
      );
    },
    web(record) {
      console.log("***********", record);
      if (record && record.localAddr) {
        let parts = record.localAddr.split(":");
        if (parts && parts.length > 0) {
          let port = parts[parts.length - 1];
          let addr = "http://127.0.0.1:" + port;
          window.open(addr);
        }
      }
    },
    ssh(record) {
      console.log("***********", record);
    },
    close(record) {
      console.log("----------", record);
    },
  },
};
</script>
